<template>
  <table-row-detail-dialog ref="detailDialog" @confirm="handleConfirm">
    <div class="dialog-body">
      <el-form ref="detailForm" label-width="90px">
        <form-item-group
          :form-data="formData"
          ref="formGroup"
        ></form-item-group>
      </el-form>
    </div>
  </table-row-detail-dialog>
</template>

<script>
import TableRowDetailDialog from '@/components/TableRowDetailDialog/index';
import FormItemGroup from '@/components/FormItemGroup/index';

import { add, edit, detail } from '@/api/system/role';
import DetailAction from '@/views/_mixins/detail-action';

export default {
  name: 'DictDetail',
  mixins: [DetailAction],
  components: {
    TableRowDetailDialog,
    FormItemGroup,
  },
  props: {},
  data() {
    return {};
  },
  computed: {},
  created() {},
  methods: {
    /**
     * 初始化表单数据
     * */
    initFormData() {
      this.formData = {
        roleName: { label: '角色名称', value: '', required: true },
        description: { label: '角色描述', value: '', type: 'textarea' },
      };
    },
    /**
     * 获取记录详情
     * 填充表单数据对象
     * */
    getDetail(data) {
      this.id = data.roleId;
      detail(this.id).then((res) => {
        this.itemData = res;
        for (let key in this.formData) {
          this.formData[key].value = res[key];
        }
      });
    },

    /**
     * 添加记录
     * 校验表单数据后，add接口
     */
    submitAdd(data) {
      add(data).then(this.submitSuccess);
    },
    /**
     * 记录详情数据编辑提交
     * 校验表单数据后，调用edit接口
     */
    submitEdit(data) {
      edit(this.id, data).then(this.submitSuccess);
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog-body {
}
</style>
